<template>
  <div>
    <!-- 图片列表顶部轮播 -->
    <div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a :class="['mui-control-item', item.id==0? 'mui-active': '']" 
                v-for="item in getlist" :key="item.id"
                @click="getimginfo(item.id)">
							{{item.title}}
						</a>
					</div>
				</div>
		</div>

    <!-- 图片信息的获取 -->
    <ul class="imgbox">
          <router-link v-for="item in getimg" :key="item.id"
           tag="li" :to="'/photosinfo/' + item.id">
            <img v-lazy="item.img_url">
            <div class="info">
                <h2>{{item.title}}</h2>
                <p>{{item.zhaiyao}}</p>
            </div>
          </router-link>
    </ul>


  </div>
</template>
<script>
import { Toast } from 'mint-ui';
import mui from '../../lib/mui/js/mui.min.js';
export default {
  data() {
    return {
      getlist:[],
      getimg:[],
    };
  },
  mounted(){
      mui('.mui-scroll-wrapper').scroll({
          deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
      });
  },
  created(){
    this.getcategorylist();
    this.getimginfo(0);
  },
  methods:{
    getcategorylist(){
      this.$http.get('api/getimgcategory').then((res)=>{
        // console.log(res.body);
        if(res.body.status===0){
          this.getlist = res.body.message,
          this.getlist.unshift({
            id:0,
            title:'全部'
          })
        }else{
          Toast('获取分类导航失败')
        }
      })
    },
    // 图片信息的获取
    getimginfo(id){
      this.$http.get('api/getimages/'+id).then((res)=>{
        // console.log(res.body);
        if(res.body.status===0){
            this.getimg = res.body.message
        }else{
          Toast('获取图片失败')
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.mui-segmented-control.mui-segmented-control-inverted
  .mui-control-item.mui-active {
  border: 0;

}
// 滑动有黄色警告出现时添加类
.mui-scroll-wrapper{
  touch-action: pan-y;
  }
.imgbox{
  list-style: none;
  padding: 0;
  margin: 0;
  li{
    text-align: center;
    margin: 10px ;
    display: block;
    background: #ccc;
    position: relative;
    img{
      width: 100%;
    }
    img[lazy="loading"]{
      width:40px;
      height: 200px;
      margin: auto;
    }
    .info{
      position: absolute;
      bottom: 4px;
      left: 0;
      right: 0;
      text-align: left;
      color: #fff;
      max-height: 82px;
      background: rgba($color: #000, $alpha: 0.4);
      h2{
        font-size: 14px;
      }
      p{
        color: #fff;
        font-size: 12px;
      }
    }

  }
}
li:first-child{
    margin-top:0; 
  }
</style>